<template>
  <TransitionRoot as="template" :show="show">
    <TransitionChild 
      as="template" 
      enter="transform ease-out duration-300 transition" 
      enter-from="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2" 
      enter-to="translate-y-0 opacity-100 sm:translate-x-0" 
      leave="transition ease-in duration-100" 
      leave-from="opacity-100" 
      leave-to="opacity-0"
    >
      <div class="w-full max-w-sm bg-white shadow-xl rounded-2xl pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
        <div class="p-4">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-10 h-10 rounded-full flex items-center justify-center" :class="iconBgClass">
                <component :is="iconComponent" class="w-6 h-6" :class="iconClass" />
              </div>
            </div>
            <div class="ml-3 flex-1 min-w-0">
              <p class="text-sm font-semibold text-gray-900">
                {{ title }}
              </p>
              <div v-if="message" class="mt-0.5 text-sm text-gray-600 whitespace-pre-line">
                {{ message }}
              </div>
            </div>
            <div class="ml-4 flex-shrink-0">
              <button 
                class="inline-flex rounded-md text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors" 
                @click="$emit('close')"
              >
                <span class="sr-only">关闭</span>
                <XMarkIcon class="h-5 w-5" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </TransitionChild>
  </TransitionRoot>
</template>

<script setup>
import { computed } from 'vue'
import { TransitionChild, TransitionRoot } from '@headlessui/vue'
import { CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, XCircleIcon, XMarkIcon } from '@heroicons/vue/24/outline'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    required: true
  },
  message: {
    type: String,
    required: true
  },
  type: {
    type: String,
    default: 'success', // success, error, warning, info
    validator: (value) => ['success', 'error', 'warning', 'info'].includes(value)
  }
})

const emit = defineEmits(['close'])

// 根据类型计算图标和样式
const iconComponent = computed(() => {
  const icons = {
    success: CheckCircleIcon,
    error: XCircleIcon,
    warning: ExclamationTriangleIcon,
    info: InformationCircleIcon
  }
  return icons[props.type]
})

const iconBgClass = computed(() => {
  const classes = {
    success: 'bg-green-100',
    error: 'bg-red-100',
    warning: 'bg-yellow-100',
    info: 'bg-blue-100'
  }
  return classes[props.type]
})

const iconClass = computed(() => {
  const classes = {
    success: 'text-green-600',
    error: 'text-red-600',
    warning: 'text-yellow-600',
    info: 'text-blue-600'
  }
  return classes[props.type]
})
</script>
